<!--  抽屉 -->
<template>
  <el-drawer :title="title" :before-close="handleClose" :visible.sync="dialog" direction="rtl" :custom-class="'demo-drawer'" ref="drawer" :size="size"  :append-to-body="true">
    <div class="demo-drawer__content">
      <div class="drawcontent">
          <slot></slot>
      </div>
      <div class="demo-drawer__footer">
        <el-button  class="bc" @click="handleSubmit" v-if="showConfirmButton">
          <img src="~@/assets/submit.png" alt="">
          {{submitText}}
        </el-button>
        <el-button  class="qx"  @click="handleClose" v-if="showCancelButton">
          <img src="~@/assets/cancel.png" alt="">
           {{cancelText}}
        </el-button>
      </div>
  </div>
</el-drawer>
</template>
<script>
export default {
  components: {
  
  },
  props: {
    dialog: {
      default: false,
    },
    title: {
      default: '',
      type: String
    },
    size: {
      default: '720px',
      type: String
    },
    // 提交按钮文本
    submitText: {
      default: '提交',
      type: String
    },
    // 取消按钮文本
    cancelText: {
      default: '取消',
      type: String
    },
    // 是否显示取消按钮
    showCancelButton: {
      default: true,
      type: Boolean
    },
    // 是否显示确定按钮
    showConfirmButton: {
      default: true,
      type: Boolean
    },
  },
    data() {
      return {
        table: false,
        loading: false,
        timer: null,
      };
    },
    methods: {
      handleClose() {
        // this.$confirm('确认关闭？')
        //   .then(() => {
        //     this.$emit("update:dialog",false)
        //   })
        //   .catch(() => {});
        this.$emit("update:dialog", false)
        this.$emit("cancel")
        try {
          let node1 = document.getElementsByClassName("tox-tinymce-aux")[0]
          let node2=node1.childNodes
          if (node2) {
             node1.removeChild(node2[0])
          }
        } catch (error) {
          
        }
      },
      handleSubmit() {
        this.$emit('submit')
      }
  }
}
</script>

<style lang="scss" scoped>
/deep/.el-drawer__wrapper{
  z-index: 1200!important;
}
/deep/.el-drawer__header{
  border-bottom: 1px solid #E5E6EB;
  padding-bottom: 18px;
  margin-bottom: 0px;
  span{
    font-weight: 700;
    font-size: 16px;
    line-height: 160%;
    color: #1C2331;
  }
  .el-icon-close:before{
    color: #4E5969;
    font-weight: bold;
  }
}
/deep/.el-drawer__body{
  padding: 24px 20px 12px;
}
.drawcontent{
  flex: 1;
  overflow-y: auto;
}
/deep/.demo-drawer__content{
  display: flex;
  flex-direction: column;
  height: 100%;
}
/deep/.demo-drawer__footer{
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.bc,.bc:focus,.bc:hover{
    background: $mainColor;
    border-radius: 4px;
    margin-right: 10px;
    color: white;
}
.qx,.qx:focus,.qx:hover{
  background: rgba(166, 179, 202, 1);
  color: white;
}
/deep/.el-drawer{
  background: rgba(247, 248, 252, 1)
}
/deep/.el-button{
  padding: 9px 20px;
  span{
    display: flex;
    align-items: center;
  }
  img{
    width: 24px;
    height: 24px;
    margin-right: 8px;
  }
}
</style>